@import url(./index.css);

body {
    background-image: url(../images/index-top-background.png);
    background-repeat: no-repeat;
    background-size: 100vw cover;
    background-color: #71C4CC;
}

.container {
    width: 1038rem;
    height: 100vh;
    margin: 0 auto;
    position: relative;
    padding: 0 0 20rem;
}

.count-down {
    position: absolute;
    top: 78rem;
    right: -200rem;
    font-size: 30rem;
    color: #E8A8A8;
}

.count-down .value {
    padding: 0 8rem;
}

.container>header.title {
    padding: 28rem 0 30rem;
    color: #fff;
}

.container .exam-wrap {
    background-color: #fff;
    border-radius: 10rem;
    padding: 10rem 0 20rem;
}

.container .exam-wrap .header {
    padding: 18rem 0;
    font-size: 16rem;
    margin-left: -62rem;
}

.container .exam {
    padding: 0 69rem 0 80rem;
    display: grid;
    grid-template-columns: 1fr;
    grid-row-gap: 20rem;
    grid-column-gap: 20rem;
    max-height: calc(100% - 150rem);
    overflow-x: hidden;
    overflow-y: scroll;
    padding-bottom: 10rem;
}

.container .exam::-webkit-scrollbar {
    width: 0;
}

.container .exam::scrollbar {
    width: 0;
}

.exam-card {
    border: 1rem solid #FFFFFF;
    background: linear-gradient(136deg, #FFFFFF 0%, #ECF3FF 51%, #FFFFFF 100%);
    box-shadow: 0px 3rem 10rem rgba(40, 51, 75, 0.2);
    border-radius: 10rem;
    padding: 20rem 20rem 30rem;
}

.exam-card .label {
    text-align: center;
    padding: 0 0 20rem;
    cursor: pointer;
}

.exam-card>.title {
    padding: 20rem 0;
}

.card-options-wrap {
    display: grid;
    grid-template-columns: 1fr;
    grid-row-gap: 10rem;
    grid-column-gap: 10rem;
}

.exam-hidden {
    line-height: 30rem;
}

.exam-hidden-btn {
    background-color: #576FFA;
    color: #fff;
    padding: 5rem 8rem;
    margin-right: 12rem;
    max-height: 30rem;
    cursor: pointer;
    border-radius: 4rem 0 0 4rem;
}

.write-wrapper {
    margin: 20rem 0 0;
    border: 1rem solid #576FFA;
    background-color: #fff;
    border-radius: 6rem;
}

.write-wrapper-error {
    margin: 20rem 0 0;
    border: 1rem solid #ea0b0b;
    background-color: #fff;
    border-radius: 6rem;
}

.write-wrapper-success {
    margin: 20rem 0 0;
    border: 1rem solid #06d322;
    background-color: #fff;
    border-radius: 6rem;
}


.write-wrapper>input {
    border: none;
    outline: none;
    background-color: transparent;
    font-size: 16rem;
    padding: 10rem 24rem;
    width: 100%;
}

.write-wrapper-success>input {
    border: none;
    outline: none;
    background-color: transparent;
    font-size: 16rem;
    padding: 10rem 24rem;
    width: 100%;
}

.write-wrapper-error>input {
    border: none;
    outline: none;
    background-color: transparent;
    font-size: 16rem;
    padding: 10rem 24rem;
    width: 100%;
}


.exam-value {
    background: rgba(255, 255, 255, 0.39);
    border: 1rem solid #D7D9DC;
    border-radius: 4rem;
    padding: 11rem 10rem 11rem 30rem;
    cursor: pointer;
}


.exam-active {
    background-color: #576FFA;
    color: #fff;
}

.exam-success {
    background-color: #67C23A;
    color: #fff;
}

.exam-error {
    background-color: #F56C6C;
    color: #fff;
}

.exam-submit {
    background-color: #576FFA;
    border: none;
    width: 400rem;
    height: 50rem;
    border-radius: 10rem;
    color: #fff;
    display: block;
    margin: 30rem auto 0;
    cursor: pointer;
}

.exam-mask {
    /* display: block; */
}

.analyze-mask {
    display: block;
}

.exam-reslut,
.exam-analyze {
    width: 1220rem;
    min-height: 689rem;
    background-color: #fff;
    border-radius: 10rem;
    position: absolute;
    left: calc(50% - 610rem);
    top: calc(50% - 420rem);
    padding: 0 50rem 10rem;
    transform: scale(.4);
    animation: choiseScale .6s forwards;
}

.exam-reslut>.title,
.exam-analyze>.title {
    height: 61rem;
    background: rgba(113, 196, 204, 1);
    border-radius: 10rem 10rem 0 0;
    margin: 0 -50rem;
    color: #13334C;
}

.result-option {
    width: 200rem;
    margin-left: 50rem;
    padding: 26rem 0 0;
}

.exam-reslut .circle {
    width: 50rem;
    height: 50rem;
    border-radius: 50%;
    border: 1rem solid #576FFA;
    margin-right: 20rem;
    cursor: pointer;
}

.exam-reslut .iconfont.llzhengque2 {
    font-size: 53rem;
    color: #576FFA;
    position: relative;
}

.exam-reslut .iconfont.llzhengque2::before {
    color: #576FFA;
    position: absolute;
    top: -8rem;
    left: 3rem;
}

.result-footer {
    margin-top: 93rem;
}

.result-btn {
    width: 135rem;
    height: 44rem;
    border: 1rem solid #97A5B7;
    border-radius: 6rem;
    background-color: #fff;
    cursor: pointer;
    margin: 0 8rem;
}

.result-error {
    border-color: #576FFA;
    background-color: #576FFA;
    color: #fff;
}